<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col>
          <el-button type="primary" size="small" @click="toBack">返回</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <div id="myChart" ref="myChart"></div>
    </el-main>
  </el-container>
</template>

<script>
import echarts from '@/utils/echarts'
import {viewFlowEchars} from '@/api/getData'

export default {
  name: 'Echarts',
  data() {
    return {
      cardId:""
    }
  },
  created(){
    this.cardId = this.$route.params.cardId
    // this.viewFlowEchars()
  },

  methods: {
    toBack() {
      this.$router.back(-1);
    },
    // 页面初始化
    // async initData(theKey) {
    //   const returnData = await viewFlowEchars({
        // userId:this.userId,
        // dictCardType:this.dictCardTypeSearch,
        // cardNumberStart:this.cardNumberStart,
        // cardNumberEnd:this.cardNumberEnd,
        // cardNumber:this.cardNumberSearch,
        // page: {
        //   current: this.currentPage + '',
        //   size: this.pageSize + ''
        // }
      // }, {
      //   // obj: this,
      //   // key: 'tableLoading;' + theKey
      // })
      // this.tableData = []
      // if (returnData._result) {
      //   this.maxPage = Math.ceil(returnData.data.total / this.pageSize) // 分页的最大页数
      //   // 数据回显
      //   returnData.data.records.map(item => {
          // const obj = {}
          // obj.id = item.id
          // obj.cardNumber = item.cardNumber // 业务号码
          // obj.cardUse = item.cardUse // 备注
          // obj.dictCardTypeName = item.dictCardTypeName //卡体类型
          // obj.cardFlowTotal = item.cardFlowTotal // 总量
          // obj.carFlowSurplus = item.carFlowSurplus // 剩余用量
          // obj.cardFlowUsed = item.cardFlowUsed // 使用流量（虚量）
          // obj.cardFlowActUsed = item.cardFlowActUsed // 使用流量（实际）
          // this.tableData.push(obj)
    //     })
    //     this.tableLoading = false
    //   }
    // },
    draw () {
      // 实例化echarts对象
      let myChart = echarts.init(this.$refs.myChart)

      // 绘制条形图
      myChart.setOption({
        title: {
          text: 'Echarts',
          top: 5,
          left: 'center'
        },
        legend: {
          data: ['衣服', '帽子', '裤子', '鞋子'],
          top: 30
        },
        // X轴
        xAxis: {
          data: [
            '一月', '二月', '三月', '四月'
          ]
        },
        // Y轴
        yAxis: {},
        // 数据
        series: [
          {
            name: '衣服',
            type: 'bar',
            data: [120, 100, 440, 320]
          },
          {
            name: '帽子',
            type: 'bar',
            data: [200, 120, 240, 330]
          },
          {
            name: 'bar',
            type: 'line',
            data: [120, 200, 240, 260, 300]
          },
          {
            name: 'bar',
            type: 'line',
            data: [120, 200, 300, 140, 260]
          }
        ]
      })
    },
    init() {
      const self = this
      setTimeout(() => {
        window.onresize = function() {
          self.chart = echarts.init(self.$refs.myChart);
          self.chart.resize();
        }
      },20)
    }
  },
  mounted() {
    this.draw()
    this.init()
  }
}
</script>

<style scoped lang="scss">
.el-container {
  .el-header {
    margin-top: 5vh;
  }

  .el-main {
    #myChart {
      width: 95%;
      height: 300px;
      margin: 20px auto;
    }
  }
}
</style>
